{% block sw_product_list %}
<sw-page class="sw-product-list">

    {% block sw_product_list_search_bar %}
    <template #search-bar>
        <sw-search-bar
            initial-search-type="product"
            :initial-search="term"
            @search="onSearch"
        />
    </template>
    {% endblock %}

    {% block sw_product_list_smart_bar_header %}
    <template #smart-bar-header>
        {% block sw_product_list_smart_bar_header_title %}
        <h2>
            {% block sw_product_list_smart_bar_header_title_text %}
            {{ $tc('sw-product.list.textProductOverview') }}
            {% endblock %}

            {% block sw_product_list_smart_bar_header_amount %}
            <span
                v-if="!isLoading"
                class="sw-page__smart-bar-amount"
            >
                ({{ total }})
            </span>
            {% endblock %}
        </h2>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_product_list_smart_bar_actions %}
    <template #smart-bar-actions>
        <sw-button-group
            v-tooltip.bottom="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('product.creator'),
                showOnDisabledElements: true
            }"
            class="sw-product-list__add-button-group"
            split-button
        >
            {% block sw_product_list_smart_bar_actions_add %}
            <mt-button
                v-tooltip="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    disabled: acl.can('product.creator'),
                    showOnDisabledElements: true
                }"
                class="sw-product-list__add-physical-button"
                variant="primary"
                :disabled="!acl.can('product.creator')"
                size="default"
                @click="$router.push({ name: 'sw.product.create', query: { creationStates: ['is-physical'] } })"
            >
                {{ $tc('sw-product.list.buttonAddProduct') }}
            </mt-button>
            {% endblock %}
            {% block sw_product_list_smart_bar_actions_add_download %}
            <sw-context-button class="sw-product-list__add-other-context-button">
                <template #button>
                    {% block sw_product_list_smart_bar_actions_add_download_button %}
                    <mt-button
                        class="sw-product-list__button-context-menu"
                        square
                        variant="primary"
                        :disabled="!acl.can('product.editor')"
                        size="default"
                    >
                        <mt-icon
                            name="regular-chevron-down-xs"
                            size="16"
                        />
                    </mt-button>
                    {% endblock %}
                </template>

                {% block sw_product_list_smart_bar_actions_add_download_context_menu_item_downloadable_product %}
                <sw-context-menu-item
                    v-tooltip="{
                        message: $tc('sw-privileges.tooltip.warning'),
                        disabled: acl.can('product.creator'),
                        showOnDisabledElements: true
                    }"
                    :router-link="{ name: 'sw.product.create', query: { creationStates: ['is-download'] } }"
                    :disabled="!acl.can('product.creator')"
                >
                    {{ $tc('sw-product.list.buttonAddDownloadableProduct') }}
                </sw-context-menu-item>
                {% endblock %}
            </sw-context-button>
            {% endblock %}
        </sw-button-group>
    </template>
    {% endblock %}

    {% block sw_product_list_language_switch %}
    <template #language-switch>
        <sw-language-switch @on-change="onChangeLanguage" />
    </template>
    {% endblock %}

    <template #content>
        {% block sw_product_list_content %}
        <div class="sw-product-list__content">

            {% block sw_product_list_empty_state %}
            <mt-empty-state
                v-if="!isLoading && !total"
                :centered="true"
                :icon="$route.meta.$module.icon"
                :headline="filterCriteria.length || isValidTerm(term) ? $t('sw-empty-state.messageNoResultTitle') : $t('sw-product.list.messageEmpty')"
                :description="filterCriteria.length || isValidTerm(term) ? $t('sw-empty-state.messageNoResultSubline') : $t($route.meta.$module.description)"
                :link-text="filterCriteria.length || isValidTerm(term) ? $t('sw-empty-state.messageNoResultLink') : ''"
                :link-href="filterCriteria.length || isValidTerm(term) ? 'sw.profile.index.searchPreferences' : ''"
            />
            {% endblock %}

            {% block sw_product_list_grid %}
            <sw-entity-listing
                v-else-if="entitySearchable"
                ref="swProductGrid"
                class="sw-product-list-grid"
                :items="products"
                :columns="productColumns"
                :repository="productRepository"
                detail-route="sw.product.detail"
                :show-selection="true"
                :is-loading="isLoading"
                identifier="sw-product-list"
                :allow-edit="acl.can('product.editor')"
                :allow-delete="acl.can('product.deleter')"
                :allow-inline-edit="acl.can('product.editor')"
                :sort-by="currentSortBy"
                :sort-direction="sortDirection"
                :natural-sorting="naturalSorting"
                :criteria-limit="limit"
                :disable-data-fetching="true"
                :allow-bulk-edit="acl.can('product.editor')"
                @column-sort="onColumnSort"
                @page-change="onPageChange"
                @inline-edit-save="onInlineEditSave"
                @selection-change="updateSelection"
                @update-records="updateTotal"
                @bulk-edit-modal-open="onBulkEditModalOpen"
            >
                {% block sw_product_list_grid_columns %}
                {% block sw_product_list_grid_columns_name_preview %}
                <template #preview-name="{ item }">
                    <sw-media-preview-v2 :source="item.cover ? item.cover.media : null" />
                </template>
                {% endblock %}

                {% block sw_product_list_grid_columns_name %}
                <template #column-name="{ item, isInlineEdit }">
                    {% block sw_product_list_grid_columns_name_inline_edit %}

                    <mt-text-field
                        v-if="isInlineEdit"
                        v-model="item.name"
                        size="small"
                    />
                    {% endblock %}

                    {% block sw_product_list_grid_columns_name_content %}
                    <div v-else>
                        {% block sw_product_list_grid_columns_name_content_variant_button %}
                        <mt-button
                            v-if="productHasVariants(item)"
                            v-tooltip="{ message: $tc('sw-product.list.variantIndicatorTooltip') }"
                            class="sw-product-list__variant-indicator"
                            size="x-small"
                            variant="secondary"
                            @click="openVariantModal(item)"
                        >
                            <mt-icon
                                name="regular-variants"
                                size="14px"
                            />
                        </mt-button>
                        {% endblock %}

                        {% block sw_product_list_grid_columns_name_content_link %}
                        <router-link :to="{ name: 'sw.product.detail', params: { id: item.id } }">
                            {{ item.translated ? item.translated.name : item.name }}
                        </router-link>
                        {% endblock %}

                        <sw-label
                            v-if="productIsDigital(item)"
                            class="sw-product-list__digital-indicator"
                        >
                            {{ $tc('sw-product.variations.generatedListColumnContentProductState.is-download') }}
                        </sw-label>
                    </div>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_product_list_grid_columns_active %}
                <template #column-active="{ item, isInlineEdit }">
                    {% block sw_product_list_grid_columns_active_inline_edit %}
                    <template v-if="isInlineEdit">
                        <mt-checkbox
                            v-model:checked="item.active"
                        />
                    </template>
                    {% endblock %}

                    {% block sw_product_list_grid_columns_active_content %}
                    <template v-else>
                        <mt-icon
                            :name="item.active ? 'regular-checkmark-xs' : 'regular-times-s'"
                            :color="item.active ? '#37d046' : '#de294c'"
                            size="16px"
                        />
                    </template>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_product_list_grid_columns_sales %}
                <template #column-sales="{ item }">
                    {% block sw_product_list_grid_columns_sales_content %}
                    <template v-if="productHasVariants(item)">
                        -
                    </template>
                    <template v-else>
                        {{ item.sales }}
                    </template>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_product_list_grid_columns_price %}
                <template
                    v-for="currency in currencies"
                    #[`column-price-${currency.isoCode}`]="{ item }"
                >
                    {{ currencyFilter(getCurrencyPriceByCurrencyId(currency.id, item.price).gross, currency.isoCode) }}
                </template>
                {% endblock %}

                {% block sw_product_list_grid_columns_stock %}
                <template #column-stock="{ item, isInlineEdit, compact }">
                    {% block sw_product_list_grid_columns_stock_inline_edit %}
                    <template v-if="isInlineEdit">
                        <mt-number-field
                            v-model="item.stock"
                            :size="compact ? 'small' : 'default'"
                        />
                    </template>
                    {% endblock %}

                    {% block sw_product_list_grid_columns_stock_content %}
                    <template v-else>
                        {{ item.stock }}
                        <sw-color-badge :variant="stockColorVariantFilter(item.stock)" />
                    </template>
                    {% endblock %}
                </template>
                {% endblock %}

                <template #column-createdAt="{ item }">
                    <sw-time-ago :date="item.createdAt" />
                </template>

                <template #column-updatedAt="{ item }">
                    <sw-time-ago
                        v-if="item.updatedAt"
                        :date="item.updatedAt"
                    />
                </template>

                {% block sw_product_list_grid_columns_actions %}
                <template #more-actions="{ item }">
                    {% block sw_product_list_grid_columns_actions_duplicate %}
                    <sw-context-menu-item
                        class="sw-product-list-grid__duplicate-action"
                        :disabled="item.parentId != null || !acl.can('product.creator')"
                        @click="onDuplicate(item)"
                    >
                        {{ $tc('sw-product.list.buttonDuplicate') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_product_list_grid_columns_actions_open_variant %}
                    <sw-context-menu-item
                        v-if="productHasVariants(item)"
                        @click="openVariantModal(item)"
                    >
                        {{ $tc('sw-product.list.contextMenuShowVariants') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </template>
                {% endblock %}
                {% endblock %}

                {% block sw_product_list_bulk_edit_modal %}
                <template #bulk-edit-modal="{ selection }">
                    <sw-bulk-edit-modal
                        v-if="showBulkEditModal"
                        class="sw-product-bulk-edit-modal"
                        :selection="selection"
                        :bulk-grid-edit-columns="productBulkEditColumns"
                        @edit-items="onBulkEditItems"
                        @modal-close="showBulkEditModal = false"
                    >
                        {% block sw_product_list_bulk_edit_grid_columns_name %}
                        <template #column-name="{ item }">
                            <router-link
                                :to="{ name: 'sw.product.detail', params: { id: item.id } }"
                                target="_blank"
                                rel="noreferrer noopener"
                            >
                                {{ item.translated ? item.translated.name : item.name }}
                            </router-link>
                        </template>
                        {% endblock %}

                        {% block sw_product_list_bulk_edit_grid_columns_active %}
                        <template #column-active="{ item }">
                            <mt-icon
                                size="16px"
                                :name="item.active ? 'regular-checkmark-xs' : 'regular-times-s'"
                                :color="item.active ? '#37d046' : '#de294c'"
                            />
                        </template>
                        {% endblock %}

                        {% block sw_product_list_bulk_edit_grid_columns_price %}
                        <template
                            v-for="currency in currencies"
                            #[`column-price-${currency.isoCode}`]="{ item }"
                        >
                            {{ currencyFilter(getCurrencyPriceByCurrencyId(currency.id, item.price).gross, currency.isoCode) }}
                        </template>
                        {% endblock %}

                        {% block sw_product_list_bulk_edit_grid_columns_stock %}
                        <template #column-stock="{ item }">
                            {{ item.stock }}
                            <sw-color-badge :variant="stockColorVariantFilter(item.stock)" />
                        </template>
                        {% endblock %}
                    </sw-bulk-edit-modal>
                </template>
                {% endblock %}
            </sw-entity-listing>

            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_product_list_content_clone_modal %}
        <sw-product-clone-modal
            v-if="cloning"
            :product="product"
            @clone-finish="onDuplicateFinish"
        />
        {% endblock %}

        {% block sw_product_list_content_variant_modal %}
        <sw-product-variant-modal
            v-if="showVariantModal"
            :product-entity="productEntityVariantModal"
            @modal-close="closeVariantModal"
        />
        {% endblock %}
    </template>

    {% block sw_product_list_sidebar %}
    <template #sidebar>
        <sw-sidebar>
            {% block sw_product_list_sidebar_refresh %}
            <sw-sidebar-item
                icon="regular-undo"
                :title="$tc('sw-product.list.titleSidebarItemRefresh')"
                @click="onRefresh"
            />
            {% endblock %}

            <sw-sidebar-filter-panel
                entity="product"
                :store-key="storeKey"
                :active-filter-number="activeFilterNumber"
                :filters="listFilters"
                :defaults="defaultFilters"
                @criteria-changed="updateCriteria"
            />
        </sw-sidebar>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
